<!--
* @FileDescription: 模拟量输出趋势
* @Author: yuec621@outlook.com
* @Date: 2025-07-30 14:28:57
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-08-04 13:51:13
-->
<template>
  <div class="pagestyle">
    <el-row :gutter="24" style="height: 100%;">
      <el-col :span="24" style="background-color: rgba(255, 255, 255, 0.6);
      border-radius: 8px;padding: 16px 16px 0 16px;height: 13%;">
        <el-form ref="formRef" :model="state.queryformData" :rules="state.queryrules" label-position="left">
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item label="日期">
                <el-date-picker v-model="state.queryformData.conditionTime" type="date" placeholder="请选择"
                  style="width: 100%;" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="时间间隔" prop="intervalMinute">
                <el-select style="width: 100%;" clearable filterable v-model="state.queryformData.
              intervalMinute" placeholder="请选择">
                  <el-option v-for="item in [1,3,5,6,10]" :key="item" :label="item+'分钟'" :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="6">
              <el-form-item label="名称">
                <el-cascader filterable style="width: 100%;" v-model="state.queryformData.sensorName" :options="state.mingList" :props="{children:'children', value: 'code', 
                label: 'name'
                ,checkStrictly: true, emitPath: false}">
                </el-cascader>
              </el-form-item>
            </el-col> -->
            <!-- <el-col :span="6">
              <el-form-item label="地点">
                <el-cascader filterable style="width: 100%;" v-model="state.queryformData.place" :options="state.didianList" :props="{children:'childList', value: 'areaName', label: 'areaName'
                ,checkStrictly: true, emitPath: false}">
                </el-cascader>
              </el-form-item>
            </el-col> -->
            <el-col :span="6">
              <el-form-item label="编号" prop="pointId">
                <el-cascader ref="bianhaoListRef" filterable style="width: 100%;" v-model="state.queryformData.pointId"
                  :options="state.bianhaoList" :props="{children:'children', value: 'pointId', 
                label: 'commonField'
                ,checkStrictly: false, emitPath: false}" @change="bianhaoListChange">
                </el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item label="默认数据">
                <el-color-picker v-model="state.queryformData.more" />
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item label="突变数据">
                <el-color-picker v-model="state.queryformData.tubian" />
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item label="标校数据">
                <el-color-picker v-model="state.queryformData.biaojiao" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="突变比较起始值(默认为0)">
                <el-input oninput="value =value.replace(/[^\-\d.]/g, '') .replace(/^\./g, '').replace(/\.{2,}/g,
'.').replace(/(\.\d+)\./g, '$1') .replace(/(-)\./g, '$1') .replace(/\-{2,}/g, '-')
.replace(/(\d+|\.)-/g, '$1') .replace(/-(0){2,}/g,'$1') .replace(/(-)0+(\d+)/g, '$1$2')
.replace(/^0+(\d)/, '$1')  .replace(/(\.\d{6})\d*/, '$1')" v-model="state.queryformData.mutationStartValue"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="">
                <el-slider :min='0' :max="100" v-model="state.queryformData.rateNo" />
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item label="只显示当前测点">
                <el-checkbox @change="isShowLocalChange" v-model="state.queryformData.isShowLocal"></el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="">
                <el-button type="info" @click="resetqueryForm">
                  重置
                </el-button>
                <el-button type="primary" @click="submitqueryForm">
                  查询
                </el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
      <el-col :span="24" style="background-color: rgba(255, 255, 255, 0.6);
      border-radius: 8px;padding: 16px;
      height: 84%">
        <el-radio-group style="width: 100%;" v-model="state.queryformData.flag" @change="radioChange">
          <el-radio :label="'A'">平均</el-radio>
          <el-radio :label="'V'">最大</el-radio>
          <el-radio :label="'M'">最小</el-radio>
        </el-radio-group>
        <vxe-table height="600" :data="state.tabledata" 
        border stripe align= 'center'>
          <vxe-column v-for="(item, index) in state.tableheads" 
          :field="item.field" :title="item.title" :key="index" :width="auto" :min-width="60">
            <template #default="{ row,rowIndex }">
              <div v-if="item.field=='index'">
                {{ row[item.field] }}
              </div>
              <div v-else style="text-align: center;" :style="{backgroundColor:
                row[item.field].calibrationStatus?
                state.queryformData.biaojiao:row[item.field].mutationStatus?
                state.queryformData.tubian:state.queryformData.more}">
                {{ row[item.field].numericValue }}
              </div>
            </template>
          </vxe-column>
        </vxe-table>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
  import querybox from "@/components/commonCom/querybox"; //用于首页抽屉查询处理
  import topbottomCom from "./listCom/topbottomCom.vue";
  import list_controller from "@/components/commonCom/list_controller";
  import fillayaCom from "./listCom/fillayaCom.vue";
  import ayadetailCom from "./listCom/ayadetailCom.vue";
  import chartCom from "./listCom/chartCom.vue";
  import {
    computed,
    nextTick,
    onMounted,
    reactive
  } from "vue";
  import {
    table_headers
  } from "@/components/commonCom/table_headers";
  import axios from "@/utils/request";
  import usePagesStore from "@/store/modules/pages";
  import {
    ElMessage,
    ElMessageBox,
    ElNotification
  } from "element-plus";
  import dayjs from "dayjs";
  import {
    searchareaTree
  } from "@/api/config";
  const {
    proxy
  } = getCurrentInstance();
  const store = usePagesStore();
  const router = useRouter();
  let previewHttps =
    import.meta.env.VITE_APP_HTTP;
  const upload = ref(null);
  // 首页查询抽屉传值
  let state = reactive({
    tabledata: [],
    tableheads: [{
      title: '',
      field: 'index'
    }],
    queryformData: {
      flag: 'A',
      more: '',
      tubian: '#F56C6C',
      biaojiao: '#FF8D1A',
      conditionTime: dayjs(),
      mutationStartValue: 0
    },
    queryrules: {
      intervalMinute: [{
        required: true,
        message: "请选择时间间隔",
        trigger: "change",
      }],
      pointId: [{
        required: true,
        message: "请选择编号",
        trigger: "change",
      }],
    },
    mingList: [],
    didianList: [],
    bianhaoList: [],
    dataObj: {
      condition: 'A',
      flag:'hisDataInfo'
    }
  });

  function getSelList() {
    axios.post("/hisPointFeed/listAllNames", {
      flag: false
    }).then((res) => {
      state.mingList = res.data
    });
    searchareaTree().then((res) => {
      state.didianList = res.data
    });
  }

  function getconditionList() {
    state.dataObj.isShowLocal = state.queryformData.isShowLocal
    axios
      .post("/hisPointFeed/conditionList", state.dataObj)
      .then((res) => {
        state.bianhaoList = res.data
      })
  }
  getconditionList(state.dataObj)
  getSelList();

  function resetqueryForm() {
    state.queryformData = {
      flag: 'A',
      more: '',
      tubian: '#F56C6C',
      biaojiao: '#FF8D1A',
      conditionTime: dayjs(),
      mutationStartValue: 0
    }
    state.tableheads = []
    state.tabledata = []
  }

  function submitqueryForm() {
    proxy.$refs["formRef"].validate((valid) => {
      if (valid) {
        state.queryformData.conditionTime = dayjs(state.queryformData.conditionTime).format('YYYY-MM-DD')
        state.queryformData.rate = state.queryformData.rateNo / 100
        getList()
      }
    })
  }

  function radioChange(val) {
    getList()
  }

  function getList() {
    state.tableheads=[{
      title:'',
      field:'index'
    }]
    axios.post('/hisPointHour/simulateTrend', state.queryformData).then(res => {
      res.data[0].forEach(item => {
        state.tableheads.push({
          title: item.timePeriod,
          field: item.timePeriod
        })
      })
      let dataObj = {}
      let arr = []
      Object.keys(res.data).forEach(key => {
        res.data[key].forEach(itemsub => {
          dataObj[itemsub.timePeriod] = itemsub
        })
        arr.push({
          index: key,
          ...dataObj
        })
      })
      state.tabledata = arr
    })
  }

  function bianhaoListChange() {
    state.queryformData.sensorName = proxy.$refs['bianhaoListRef'].getCheckedNodes()[0].data.sensorName
  }

  function isShowLocalChange(val) {
    state.dataObj.startTime = dayjs(state.queryformData.conditionTime).format('YYYY-MM-DD 00:00:00')
    state.dataObj.endTime = dayjs(state.queryformData.conditionTime).format('YYYY-MM-DD 23:59:59')
    getconditionList(state.dataObj)
  }
  onMounted(() => {});
</script>
<style lang="scss" scoped>
  .pagestyle {
    margin: 0 10px;
    position: relative;
  }

  .xiazai {
    position: absolute;
    top: 42px;
    right: 110px;
    width: 120px;
    height: 64px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    background-color: #ffff;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
    border-radius: 2px;
    z-index: 99;

    .item {
      width: 100%;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .item:hover {
      background-color: #ececec;
    }
  }

  ::v-deep .el-drawer {
    .querycss {
      .fsc {
        &:nth-child(2) {
          display: none;
        }
      }
    }

    .table_box {
      .fsc {
        display: none;
      }
    }
  }
</style>